<template>
	<view class="order-header-box">
		<view class="order-header-text">鼎峰花漫程店(No.10086)</view>
		<view class="order-header-small-text">
			长安镇宵边大街36号漫城街区一层1923室
		</view>
	</view>
	
	<view class="order-center-box">
		<view class="order-center-row">立即自取，约22:47可取</view>
		<view class="order-center-row-small">金牌咖啡师正在等你下单</view>
	</view>
	
	<view class="order-content-box">
		<view class="order-right-top-label">
			系统已为您推荐的更优折扣方案
		</view>
		
		<view class="order-right-item">
			<image class="order-right-item-img" src="../../static/p4.jpg" mode="widthFix"></image>
			<view class="order-right-item-text">
				<view class="order-right-item-header">
					<view class="order-right-item-text-title">标准美式</view>
					<view class="order-right-item-text-right">¥14</view>
				</view>
				
				<view class="order-right-item-text-price">
					大杯 160z/IIAC金奖豆/热/不另外加糖/无奶
				</view>
				<view class="order-right-item-text-row">
				  <text class="order-right-item-label">买任意2杯饮品送成都文旅联名-好乖哟贴纸</text>
				  <text class="order-right-item-number">×23</text>
				</view>
			</view>
		</view>
		
		
		<view class="order-right-item">
			<image class="order-right-item-img" src="../../static/p3.jpg" mode="widthFix"></image>
			<view class="order-right-item-text">
				<view class="order-right-item-header">
					<view class="order-right-item-text-title">标准美式</view>
					<view class="order-right-item-text-right">¥14</view>
				</view>
				
				<view class="order-right-item-text-price">
					大杯 160z/IIAC金奖豆/热/不另外加糖/无奶
				</view>
				<view class="order-right-item-text-row">
				  <text class="order-right-item-label">买任意2杯饮品送成都文旅联名-好乖哟贴纸</text>
				  <text class="order-right-item-number">×23</text>
				</view>
			</view>
		</view>
		
		<view class="order-rows-one">
			<view class="order-titles">
				<text class="order-titles_t1">超值换购</text><text class="order-titles_t2">近期有611人换购</text>
			</view>
			<scroll-view scroll-x="true" class="scroll-view-wrap">
				<view class="scroll-view">
					<view class="scroll-view-item">
						<view class="scroll-view-row01"><image src="../../static/p3.jpg" alt="" /></view>
						<view class="scroll-view-row02">凤梨大福</view>
						<view class="scroll-view-row03">有67人换购</view>
						<view class="scroll-view-row04">¥3.9 <text>¥8</text></view>
						<view class="scroll-view-btn"></view>
					</view>
					<view class="scroll-view-item">
						<view class="scroll-view-row01"><image src="../../static/p3.jpg" alt="" /></view>
						<view class="scroll-view-row02">凤梨大福</view>
						<view class="scroll-view-row03">有67人换购</view>
						<view class="scroll-view-row04">¥3.9 <text>¥8</text></view>
						<view class="scroll-view-btn"></view>
					</view>
					<view class="scroll-view-item">
						<view class="scroll-view-row01"><image src="../../static/p3.jpg" alt="" /></view>
						<view class="scroll-view-row02">凤梨大福</view>
						<view class="scroll-view-row03">有67人换购</view>
						<view class="scroll-view-row04">¥3.9 <text>¥8</text></view>
						<view class="scroll-view-btn"></view>
					</view>
					<view class="scroll-view-item">
						<view class="scroll-view-row01"><image src="../../static/p3.jpg" alt="" /></view>
						<view class="scroll-view-row02">凤梨大福</view>
						<view class="scroll-view-row03">有67人换购</view>
						<view class="scroll-view-row04">¥3.9 <text>¥8</text></view>
						<view class="scroll-view-btn"></view>
					</view>
					<view class="scroll-view-item">
						<view class="scroll-view-row01"><image src="../../static/p3.jpg" alt="" /></view>
						<view class="scroll-view-row02">凤梨大福</view>
						<view class="scroll-view-row03">有67人换购</view>
						<view class="scroll-view-row04">¥3.9 <text>¥8</text></view>
						<view class="scroll-view-btn"></view>
					</view>
				</view>
			</scroll-view>
			
		</view>
		
	</view>
	
	<view class="order-model-plays">
		<view class="order-rows-two marginlr dashed" style="margin-bottom: 0;">
			<view class="order-left" style="font-weight: bold;">瑞信优惠</view>
			<view class="order-right color-orange">¥-49.1
				<view class="right-icons active"></view>
			</view>
		</view>
		<view class="order-rows-two marginlr">
			<view class="order-left"></view>
			<view class="order-right">应付<text>¥37.9</text></view>
		</view>
	</view>
	
	
	<view class="order-rows-two marginlr">
		<view class="order-left">支付方式</view>
		<view class="order-right">
			<image class="text-icons" src="../../static/icon/wx.png" mode="widthFix"></image>
			微信支付
			<view class="right-icons "></view>
		</view>
	</view>
	
	<view class="order-rows-two marginlr">
		<view class="order-left">取餐方式</view>
		<view class="order-right">
			<view class="radio-group-box">
				<radio-group>
					<label class="radio-cell">
						<view class="cell1">
							<radio color="#c1a37a" value="items.organ" />
						</view>
						<view class="cell2">店内用餐</view>
					</label>
					<label class="radio-cell">
						<view class="cell1">
							<radio color="#c1a37a" checked="true" value="items.organ2" />
						</view>
						<view class="cell2">自提带走</view>
					</label>
				</radio-group>
			</view>
		</view>
	</view>
	
	<view class="order-rows-two marginlr">
		<view class="order-left">备注特殊要求</view>
		<view class="order-right"> 
			<view class="right-icons "></view>
		</view>
	</view>
	
	
	<view class="order-tips marginlr">温馨提示：建议您按需点单，杜绝浪费。</view>
	
	<view class="footer-height">
		
	</view>
	<view class="order-footer">
		<view class="order-footer-row1">应付 <text>¥37.9</text></view>
		<view class="order-footer-row2">总计优惠¥49.1</view>
		<view class="order-footer-btn">去支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	$gray-color: #7e7e7e;
	$green-color: #2b9939;
	$orange-color: #ea6141;;
	
	
	page {
		background-color: #f5f5f5;
	}
	.dashed {
		border-top: 2px dashed   #f5f5f5;
		border-bottom: 2px dashed   #f5f5f5;
	}
	.color-orange {
		color: $orange-color;
	}
	%lrpd {
		padding: 15px 13px;
	}
	%wrapmarg {
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.marginlr {
		@extend %wrapmarg;
	}
	.radio-group-box {
		display: flex;
		align-items: center;
		radio-group {
			display: flex;
			radio {
				transform:scale(0.7);
			}
		}
		.radio-cell {
			display: flex;
			margin-left: 26px;
			.cell1 {
				margin-right: -3px;
			}
			.cell2 {
				display: flex;
				align-items: center;
			}
		}
	}
	
	.scroll-view-wrap {
		width: 100%;
		.scroll-view {
			display: flex;
			padding-bottom: 20px;
			.scroll-view-item{
				flex: none;
				width: 118px;
				height: 130px;
				background-color: #fffaf6;
				margin-right: 7px;
				border-radius: 6px;
				padding: 0 9px;
				box-sizing: border-box;
				position: relative;
				.scroll-view-row01 {
					display: flex;
					justify-content: center;
					 image {
						 width: 60px;
						 height: 60px;
						 display: block;
						 margin-top: 3px;
					 }
				}
				.scroll-view-row02 {
					font-weight: bold;
					font-size: 11px;
					margin-top: 6px;
				}
				.scroll-view-row03 {
					font-size: 10px;
					color: $orange-color;
					margin-top: 5px;
				}
				.scroll-view-row04 {
					margin-top: 7px;
					color: $orange-color;
					font-size: 11px;
					font-weight: bold;
					text{
						color: $gray-color;
						font-weight: normal;
						font-size: 9px;
					}
				}
				.scroll-view-btn {
					position: absolute;
					right: 8px;
					bottom: 8px;
					width: 14px;
					height: 14px;
					background: url("/static/icon/add-fill.png") no-repeat;
					background-size: 100%;
				}
			}
		}
	}
	.footer-height {
		height: 80px;
	}
	.order-footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background-color: #ffffff;
		height: 75px;
		.order-footer-row1 {
			font-size: 12px;
			margin-top: 14px;
			margin-left: 13px;
			text{
				font-size: 15px;
				font-weight: bold;
			}
		}
		.order-footer-row2 {
			font-size: 10px;
			margin-top: 4px;
			margin-left: 13px;
			color: $orange-color;
		}
		.order-footer-btn {
			position: absolute;
			right: 14px;
			top: 12px;
			background-color: $orange-color;
			color: #fff;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 143px;
			border-radius: 20px;
		}
	}
	
	.order-rows-two {
		display: flex;
		padding: 15px 13px;
		background-color: #ffffff;
		border-radius: 5px;
		.order-left {
			font-size: 13px;
			flex: 1;
			font-weight: bold;
		}
		.order-right {
			font-size: 11px;
			font-weight: bold;
			display: flex;
			align-items: center;
		}
		.text-icons {
			width: 23px;
			height: 20px;
			margin-right: 8px;
		}
		.right-icons {
			width: 13px;
			height: 12px;
			background: url("@/static/icon/right.png") no-repeat;
			background-size: 100%;
			margin-left: 2px;
			margin-right: -4px;
			transform: rotate(0deg);
			&.active {
				transform: rotate(90deg);
			}
		}
	}
	.order-header-box, .order-center-box {
		padding: 13px;
		@extend %wrapmarg;
		background-color: #ffffff;
		border-radius: 5px;
		.order-header-text, .order-center-row {
			font-size: 13px;
			font-weight: bold;
			padding-bottom: 7px;
		}
		.order-header-small-text, .order-center-row-small{
			font-size: 11px;
		}
	}
	
	.order-center-box {
	 
		.order-center-row {
 
		}
		.order-center-row-small {
		 
		}
	}


	.order-content-box {
		flex: 1;
		padding: 20px 10px 0;
		position: relative;
		background-color: #ffffff;
		@extend %wrapmarg;
		margin-bottom: 0px;
		border-radius: 5px;
		.order-right-top-label {
			position: absolute;
			top: 0px;
			right: 0px;
			background-color: #f6efe8;
			font-size: 10px;
			color: $orange-color;
			padding: 5px;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
		}
		.order-right-item {
			display: flex;
			padding: 10px 0;
		}
		.order-right-item-img {
			border-radius: 5px;
			display: block;
			width: 80px;
			height: 80px;
			background-color: $gray-color;
		}
		.order-right-item-text {
			flex: 1;
			padding-left: 10px;
			padding-right: 10px;
		
		}
		.order-right-item-header {
			display: flex;
		}
		.order-right-item-text-title {
			font-size: 13px;
			font-weight: bold;
			flex: 1;
		}
		.order-right-item-text-right {
			font-weight: bold;
			color: $orange-color;
		}
		.order-right-item-text-price {
			margin-bottom: 8px;
			color: $orange-color;
			font-size: 10px;
			color: $gray-color;
		}
		
		.order-right-item-text-price-out {
			font-weight: 400;
			font-size: 13px;
			color: $gray-color;
			text-decoration: line-through;
		}
		.order-right-btn {
				display: flex;
				justify-content: flex-end;
				padding: 0 15px;
			}
			.order-right-btn-text {
				text-align: center;
				display: inline-block;
				width: 20px;
				font-size: 13px;
				height: 23px;
				line-height: 23px;
			}
		.order-right-item-text-row {
			display: flex;
			.order-right-item-label {
				display: inline-block;
				padding: 2px 5px;
				border-radius: 4px;
				font-size: 10px;
				color: $orange-color;
				border: 1px solid $orange-color;
				border: 1px solid #ffd5cb;
				
			}
			.order-right-item-number {
				font-size: 12px;
				display: block;
				flex: 1;
				text-align: right;
			}
		}
 
	}
	.order-tips {
		font-size: 10px;
		color: #adadad;
	}
	.order-rows-one{
		.order-titles {
			padding: 10px 0 20px;
			.order-titles_t1 {
				font-weight: 500;
				margin-right: 10px;
			}
			.order-titles_t2 {
				font-size: 13px;
				color: orangered;
			}
		}
	}
	

</style>
